// vue.config.js

// 是否是生产环境
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
// 引入 path
const path = require('path');
// 设置resolve环境
const resolve = (dir) => path.join(__dirname, dir);
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 代码压缩 delete config

module.exports = {
    // 公共路径
    publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',
    // 指定生成的 index.html 的输出路径 相对于outputDir
    indexPath: 'index.html' ,
    // 'dist', 生产环境构建文件的目录
    outputDir: process.env.outputDir || 'dist',
    // 相对于outputDir的静态资源(js、css、img、fonts)目录
    assetsDir: 'static',
    // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
    lintOnSave: false,
    // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了
    runtimeCompiler: true,
    // 生产环境的 source map
    productionSourceMap: !IS_PROD,
    // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    parallel: require("os").cpus().length > 1,
    // 
    chainWebpack: config => {
        // 修复热加载
        config.resolve.symlinks(true);
        // 压缩代码
        config.optimization.minimize(true);

        // 添加别名
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@components', resolve('src/components'))
            .set('@views', resolve('src/views'))
            .set('@store', resolve('src/store'))
            .set('@router', resolve('src/router'));

        // 分割代码
        config.optimization.splitChunks({
            chunks: 'all'
        });

    },
    // 
    configureWebpack: config => {
        // 生产环境相关配置
        if (IS_PROD) {
            // 代码压缩

            // gzip压缩
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false // 删除原文件
                })
            );
            
            // 
        } else {
            
        }

        // performace 警告
        config.performance = {
            hints:'warning',
            //入口起点的最大体积 整数类型（以字节为单位）
            maxEntrypointSize: 50000000,
            //生成文件的最大体积 整数类型（以字节为单位 300k）
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }

    },
    // css 
    css: {
        // 生产环境下是 true，开发环境下是 false 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)
        extract: IS_PROD,
        // 可以去掉文件名中的 .module
        requireModuleExtension: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // CSS 相关的 loader 传递选项
        loaderOptions: {
            css: {

            },
            scss: {
                prependData:  `@import "@assets/css/_variable.scss";
                               @import "@assets/css/_myMixins.scss";`
            }
        }
    },
    // 
    devServer: {
        host: "localhost",
        port: 8888, // 端口号
        https: false, // https:{type:Boolean}
        open: false, //配置自动启动浏览器
        //hotOnly: true, // 热更新
        hot: true,
        compress: true, // 开启代码压缩,

        // 安装了 wepackserver 开启自动刷新浏览器
        disableHostCheck:true //webpack4.0 开启热更新
    }


};